<template>
  <!-- 控制台 -->
  <div id="console" :class="consoleIsShow ? 'show' : ''">
    <div class="console-mask" href="javascript:void(0);" @click="theme.hideConsole()" rel="external nofollow"></div>

    <div class="close-btn" @click="theme.hideConsole()" href="javascript:void(0);">
      <i class="haofont hao-icon-circle-xmark"></i>
    </div>

    <div class="console-card-group" style="display: flex;">
      <!-- 评论，需要使用评论插件，获取最近评论 -->
      <div class="console-card-group-left">
        <div class="console-card" id="card-newest-comments" @click="theme.hideConsole()">
          <div class="card-content">
            <div class="author-content-item-tips">互动</div>
            <span class="author-content-item-title">最近评论</span>
          </div>
          <div class="aside-list">
            <div class="aside-list-item" v-for="(talk , index) in talkList" :key="index">
              <a class="thumbnail" href="javascript:void(0);" @click="toPath('article?id=' + talk.id)">
                <img :src="talk.avatar" alt="头像"/>
                <div class="name">
                  <span>{{ talk.name }}</span>
                </div>
              </a>
              <div class="content">
                <a class="comment" href="javascript:void(0);" :title="talk.content"
                   @click="toPath('article?id=' + talk.id)">
                  {{ talk.content }}
                </a>
                <time :datetime="talk.dateTime"></time>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧展示 tag -->
      <div class="console-card-group-right">
        <div class="console-card tags" @click="theme.hideConsole()">
          <div class="card-content">
            <div class="author-content-item-tips">标签</div>
            <span class="author-content-item-title">寻找感兴趣的领域</span>
          </div>
          <div class="card-tag-cloud">
            <a :style="{ fontSize: '1em', color: tag.color }" href="javascript:void(0);" :title="tag.content"
               v-for="(tag , index) in tagList" :key="index" @click="toPath('tags?id=' + tag.id)">
              {{ tag.content }}<sup>{{ tag.mark }}</sup>
            </a>
          </div>
        </div>
        <!-- 底部展示时间归档 -->
        <div class="console-card history" @click="theme.hideConsole()">
          <div class="item-headline">
            <i class="fas fa-archive"></i>
            <span>文章</span>
          </div>
          <ul class="card-archive-list">
            <li class="card-archive-list-item" v-for="(dir , index) in dirList" :key="index">
              <a class="card-archive-list-link" href="javascript:void(0);" @click="toPath('article?date=' + dir.date)">
                <span class="card-archive-list-date">
                  {{ dir.date }}
                </span>
                <div class="card-archive-list-count-group">
                  <span class="card-archive-list-count">{{ dir.count }}</span>
                  <span class="card-archive-list-count-unit">篇</span>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="button-group">
      <div class="console-btn-item">
        <a class="darkmode_switchbutton" href="javascript:void(0);" @click="theme.switchThemeMode();"
           rel="external nofollow" title="显示模式切换">
          <i class="haofont hao-icon-moon-clear-fill" style="font-size:1rem"></i>
        </a>
      </div>
      <div :class="['console-btn-item' , siteHideAside ? 'on' : '']" id="consoleHideAside"
           @click="theme.switchShowAside()" title="边栏显示控制">
        <a class="asideSwitch">
          <i class="haofont hao-icon-arrows-left-right"></i>
        </a>
      </div>
      <div :class="['console-btn-item' , commentBarrage ? 'on' : '']" id="consoleCommentBarrage"
           @click="theme.switchCommentBarrage()" title="热评开关">
        <a class="commentBarrage">
          <i class="haofont hao-icon-chat--fill"></i>
        </a>
      </div>
      <div :class="['console-btn-item' , siteKeyBoardToggle ? 'on' : '']" id="consoleKeyboard"
           @click="theme.keyboardToggle()" title="快捷键开关">
        <a class="keyboard-switch">
          <i class="haofont hao-icon-keyboard"></i>
        </a>
      </div>
      <div :class="['console-btn-item' , siteMusicPlay ? 'on' : '']" id="consoleMusic"
           @click="music.musicToggle()"
           title="音乐开关">
        <a class="music-switch">
          <i class="haofont hao-icon-disc-fill"></i>
        </a>
      </div>
    </div>
  </div>
</template>

<script setup>
import store from "../../store/index.js";
import themeJs from "../../utils/theme/index.js";
import toolJs from "../../utils/tool/index.js";
import musicJs from "../../utils/music/index.js";
import {computed} from 'vue';
import {useRouter} from 'vue-router';

const router = useRouter();
const theme = computed(() => themeJs);
const tool = computed(() => toolJs);
const music = computed(() => musicJs);
const consoleIsShow = computed(() => store.state.page.consoleIsShow);
const siteMusicPlay = computed(() => store.state.page.siteMusicPlay);
const siteKeyBoardToggle = computed(() => store.state.page.siteKeyBoardToggle);
const siteHideAside = computed(() => store.state.page.siteHideAside);
const commentBarrage = computed(() => store.state.page.commentBarrage);
const tagList = computed(() => store.state.data.consoleTagList);
const talkList = computed(() => store.state.data.consoleTalkList);
const dirList = computed(() => store.state.data.consoleRecordList);

const toPath = (path) => {
  router.push(path)
}
</script>

<style scoped>

</style>